<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
</style>
<title>Marauders Map</title>
<style type="text/css">
  .labels {
    color: blue;
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    width: 40px;     
    border: 2px solid black;
    white-space: nowrap;
  }

  .targetLabels {
    color: red;
    background-color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    width: 40px;     
    border: 2px solid black;
    white-space: nowrap;
  }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor={{ sensorParam }}"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel.js"></script>
<script type="text/javascript">

  var map;
{% if target %}
  window.target = new google.maps.LatLng({{target.latitude}}, {{target.longitude}});
  window.targetName = '{{target.name}}';
{% endif %}

{% if user %}
window.userName = '{{user.name}}';
{% endif %}

function get_location() {
    navigator.geolocation.getCurrentPosition(show_map);
}

function show_map(position) {
  document.getElementById("latitude").value = position.coords.latitude;
  document.getElementById("longitude").value = position.coords.longitude;
}

  function initialize(center, zoom) {
    get_location();
    if(window.target){
	var latlng = target;
    }else{
	    if(center){
		var latlng = center;
	    }else{
		var latlng = new google.maps.LatLng(33.775562,-84.397681);
	    }

    }
    if(zoom){
	var zoomLevel = zoom;
    }else{
	var zoomLevel = 16;
    }
    var myOptions = {
      zoom: zoomLevel,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    window.target = undefined; //make sure it doesn't recenter here on map refreshes
    setMarkers(map, users);
    resetTimer();
  }

  var users = [
  {% for user in users %}
	{% if user in friends %}
	  ['{{user.name}}', {{user.latitude}}, {{user.longitude}}, true],
	{% else %}
	  ['{{user.name}}', {{user.latitude}}, {{user.longitude}}, false],
	{% endif %}
  {% endfor %}
  ];
//user[3] encodes whether they are a friend or not

  var timer;
  function resetTimer() {
	timer = setTimeout("refresh()", 20*1000);
  }

  var markers = Array();

  function setMarkers(map, users) {
    // Add markers to the map
//    alert(users);
	var green_marker = new google.maps.MarkerImage(
                 '../media/green_marker.png',
                 new google.maps.Size(32,32),
                 new google.maps.Point(0,0),
                 new google.maps.Point(10,32)
       );

       var blue_marker = new google.maps.MarkerImage(
                 '../media/blue_marker.png',
                 new google.maps.Size(32,32),
                 new google.maps.Point(0,0),
                 new google.maps.Point(10,32)
       );

       var red_marker = new google.maps.MarkerImage(
                 '../media/red_marker.png',
                 new google.maps.Size(32,32),
                 new google.maps.Point(0,0),
                 new google.maps.Point(10,32)
       );
    for(var j = 0; j < markers.length; j++){
	markers[j].setMap(null);
    }
    markers = Array();

    for (var i = 0; i < users.length; i++) {	
	var user = users[i];
	var userName = user[0].replace(/\s+/g,'');
	if(userName == ''){
		continue;
	}
	var myLatLng = new google.maps.LatLng(user[1], user[2]);
	var markerIcon;
	if(user[0] == window.userName){
               markerIcon = red_marker;
       }else{
               if(user[3]){
                       markerIcon = green_marker;
               }else{
                       markerIcon = blue_marker;
               }
       }
	var marker = new MarkerWithLabel({
		draggable: false,
		icon: markerIcon,
		map: map,
		position: myLatLng,
		labelContent: user[0],
		labelAnchor: new google.maps.Point(22, 0),
		labelClass: ((window.targetName && window.targetName == user[0])? "targetLabels":"labels"), // the CSS class for the label
		labelStyle: {opacity: 0.75},
		animation: ((window.targetName && window.targetName == user[0])? google.maps.Animation.BOUNCE: '')
        });
	//if(window.targetName && window.targetName == marker.title){
	//	marker.labelClass = "targetLabels";
	//	marker.setAnimation(google.maps.Animation.BOUNCE);
	//}
	markers.push(marker);
     }
     //alert('markers: '+markers);
  }

  function refresh() {
	var xmlHttp = null;
    	xmlHttp = new XMLHttpRequest();
    	xmlHttp.open( "POST", '/mapRefresh/', false );
	var params = "latitude="+document.getElementById("latitude").value+"&longitude="+document.getElementById("longitude").value;
	//alert(params);
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", params.length);
	xmlHttp.setRequestHeader("Connection", "close");
    	xmlHttp.send( params );
	var response = String(xmlHttp.responseText);
	document.getElementById("refreshResponse").innerHTML = response;
	var user_array = response.split('|');
	user_array.filter( function(value){return (value=='' || value==undefined) ? 0 : 1;} );
	var len = user_array.length;
	new_array = Array();
	for ( var i=0; i < len; i=i+1 ){
		new_array[i] = user_array[i].split(',');
		new_array[i].filter( function(value){return (value==undefined) ? 0 : 1;} );
		new_array[i][3] == 'true' ? new_array[i][3] = true : new_array[i][3] = false;
	}
	users = new_array
	//initialize(map.center, map.zoom);
	setMarkers(map, new_array);
	resetTimer();
	//alert('refresh');
  }
</script>
</head>
<body onload="initialize()" bgcolor=#2D2D2D>
  <header align = center id="Menu" style="width:100%; height:25px;margin-top:4px">
	<div>
		<input type="submit" value="Map" id="Map"  name="Map" style="width:75px;height:25px" onclick="window.location='/'"/>
		<input type="submit" value="Friends" id="Friends"  name="Friends" style="width:75px;height:25px" onclick="window.location='/friends/'"/>
		<input type="submit" value="Inbox" id="Inbox" name="Inbox" style="width:75px;height:25px" onclick="window.location='/inbox/'"/>
		<input type="submit" value="Everybody" id="Everybody"  name="Everybody" style="width:75px;height:25px" onclick="window.location='/everybody/'"/>
		<input type="submit" value="Logout" id="Logout"  name="Logout" style="width:75px;height:25px" onclick="window.location='/logout/'"/>
	</div>
  </header>
  <div id="map_canvas" style="width:100%; height:95%"></div>
  <div id="refreshResponse" style="width:100%; height:100%" color="#FFFFFF"></div>
  <input id="latitude" type="hidden"/>
  <input id="longitude" type="hidden"/>
</body>
</html>
